<!doctype html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>canvas涂鸦板</title>
<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no">
<meta name="Copyright" content="独奏" />
<meta name="description" content="你画我猜,draw something,html5,小游戏" />
<meta content="你画我猜,draw something,html5,小游戏" name="keywords" />
<link rel="stylesheet" href="{$smarty.const.PUBLIC_PATH}css/amazeui.min.css">
<script type="text/javascript" src="{$smarty.const.PUBLIC_PATH}js/jquery-1.8.2.min.js"></script>
<script  type="text/javascript" src="{$smarty.const.PUBLIC_PATH}js/myself/websocket.js"></script>
<script type="text/javascript" src="{$smarty.const.PUBLIC_PATH}js/myself/paint.js"></script>
<script type="text/javascript" src="{$smarty.const.PUBLIC_PATH}js/myself/chat.js"></script>
<script type="text/javascript" src="{$smarty.const.PUBLIC_PATH}js/myself/timer.js"></script>
<script type="text/javascript" src="{$smarty.const.PUBLIC_PATH}js/amazeui.min.js"></script>
<!-- <script type="text/javascript" src="{$smarty.const.PUBLIC_PATH}js/myself/question.js"></script> -->

<!--
<script  type="text/javascript" src="{$smarty.const.PUBLIC_PATH}js/base.js"></script>
<script  type="text/javascript" src="{$smarty.const.PUBLIC_PATH}js/prototype.js"></script>
<script  type="text/javascript" src="{$smarty.const.PUBLIC_PATH}js/mootools.js"></script>
<script  type="text/javascript" src="{$smarty.const.PUBLIC_PATH}js/Ajax/ThinkAjax.js"></script>
//metro UI引用css包
<link href="{$smarty.const.PUBLIC_PATH}css/modern.css" rel="stylesheet">
-->
<style>
html{  background: #0d7bd5 url('{$smarty.const.PUBLIC_PATH}images/glow.png') no-repeat center center;height: 100%;_background: #0d7bd5;}
*{  margin:0;padding:0;}
.fa{ width:100%;/*margin-left: 100px;*/}
.top{ margin:0;color:#fff;width: 100%;}
.top input{ width:6.6%;/*height:25px;*/border:0px solid #fff;background:#ddd;margin-left: 10px;box-shadow:3px 3px 3px #000;margin-top: 5px;}
#canvas{ background:#eee;cursor:default;}
.font input{ font-size:14px;border-radius: 40px;background-color: black;margin: 10px 0px;}
.top .on{ border:2px solid #BFC9CA;}
.top .grea{ background:#aaa;box-shadow:2px 2px 3px #000;}
.tishi{ font-size:16px;border:0px solid #fff;padding-right:10px;padding-left: 10px;padding-Top:2px;padding-Bottom:2px;background:#FF0097;color: #fff;font-weight: bolder;}
.log { word-wrap: break-word; /*设置中文换行*/word-break : break-all;overFlow-y:auto;width:280px;height:330px;margin:0 auto;text-align:left;background-color: #CF3;border-top-width: 7px;border-bottom-width: 3px;border-top-style: solid;border-bottom-style: solid;display: none;}
.msg { width:230px;height: 25px;margin-top:10px;}
.send{ min-width:50px;min-height:30px;margin-top:10px;margin-left:3px;/*background-color:#006400;*/color:#fff;}
/*.quesDiv{ position:absolute;text-align:center;position:absolute;left:350px;top:160px;color:#fff;}*/
.quesDiv { 
    position: absolute;
    text-align: center;
    position: absolute;
    left: 30%;
    /*top: 200px;*/
    /*color: pink;*/
}
/*.right{ box-shadow:7px 5px 6px #000;width: 300px;text-align:center;position:absolute;left:880px;top:50px;height:420px;background-color:#CF3;}*/
/*.countdown{ text-align:center;position:absolute;left:640px;top:50px;width: 200px;background-color:#5859b9;font-size:80px;color:#fff;font-weight:bold;}*/
.countdown { 
    text-align: center;
    position: absolute;
    left: 70%;
    top: 5%;
    width: 100px;
    /* background-color: #5859b9; */
    font-size: 40px;
    color: #fff;
    font-weight: bold;
}
.right { 
    /*box-shadow: 7px 5px 6px #000;*/
    width: 100%;
    text-align: center;
   
    height: 50px;
    /*margin-bottom: 10px;*/
    /*background-color: #ffa6f9;*/
}
.right input{ 
    width: 61%;
    height: 30px;
    margin-top: 10px;
    margin-top: 10px;
    margin-left: 20px;
    display: inline;
}
body{ 
    background-image: url("{$smarty.const.PUBLIC_PATH}images/hellokitty.jpg");
}
.users img{ 
    width: 40px;
    height: 40px;

}
.users li{ 
    list-style: none;
    width: 40px;
    float: left;
    margin: 5px;
    margin-top: 0px;
}
.users li span{ 
    font-size: 0.5rem;
    width: 45px;
    white-space:nowrap;
    text-overflow:ellipsis;
    overflow:hidden;
    display: block;
}
.users ul{ 
    padding-left: 0.5rem !important;
    margin-bottom: 0px;
    height: 60px;
}
canvas{ 
    margin-top: 0px !important;
}
.string { 
    width:50%;
    height:40px;
    position:absolute;
    overflow:hidden;
    color:#000;
    font-size:2em;
    line-height:2em;
    cursor:pointer;
    white-space:nowrap;
}
</style>
</head>
<body class="fa">
<!-- <h2 align="center" style="">你画我猜</h2> -->
    <!-- <img src="{$smarty.const.PUBLIC_PATH}images/logo.png" style="width: 100%;height: 50px;"> -->
    <div class="top" id="top">
       <div id="addcolor">
        <!--在这里添加画笔颜色-->
        </div>
        <div class="font" id="font">
            宽度：
            <input type="button" value="细" class="grea"/>
            <input type="button" value="中" />
            <input type="button" value="粗" />
        </div>
        <div>
            橡皮擦：
            <input id="eraser" style="width:60px;font-size:14px;"type="button" value="橡皮擦" />
            <input id="clear" type="button" value="清除画布" style="width:80px;"/>
        </div>
        
        <!-- <input id="imgurl" type="button" value="导出图片路径" style="width:90px;"/> -->

    </div>
    <div id="quesDiv" class="quesDiv">
      您本次的题目是：<input class="tishi" id="question" type="button" value="...">
      <script>
      // question.setQuestion();
      </script>
  
    </div>

        <canvas style="margin-top: 10px;" id="canvas" width="375px" height="420px">您的浏览器不支持 canvas 标签</canvas>

    
    <div class="countdown" id="countdown">
        <script>
        timer.timerStart();
        </script>
    </div>

    <div class="boxDom" id="boxDom" style="height: 7%;float: left;width: 100%;position: absolute;top: 74%;">
    
    </div>
    <div style="height: 19%; position: absolute;left: 0;top:81%;/*bottom: 0px;*/width: 100%;padding-top: 10px;">
    <div class="users">
        <ul>
            <li>
                <img src="{$user.main_img}" >
                <span>{$user.name}</span>
            </li>
            <li>
                <img src="{$smarty.const.PUBLIC_PATH}images/logo.png" >
                <span>王创新的</span>
            </li>
            <li>
                <img src="{$smarty.const.PUBLIC_PATH}images/logo.png" >
                <span>王创新的</span>
            </li>
        </ul>
        
    </div>

    <div class="right">
        <h3 align="center" style="margin-top:10px;display: none;">即时聊天</h3>
        <div class="log" id="log"></div>
        <input id="msg" class="am-form-field" type="textbox"/>
        <button class="send am-btn am-btn-secondary" >发送</button>
    </div>
    </div>

<script>
    if(document.body.clientWidth<375){ 
         // alert(document.body.clientWidth)
        var viewport = document.querySelector("meta[name=viewport]");
        viewport.setAttribute('content', 'width=device-width,initial-scale=0.9'+',user-scalable=no'); 
    }
    $("canvas").width($("body").width())
    $("canvas").height($("body").height()*0.65)
    $(".top").height($(".fa").height()*0.16)
    var c=document.getElementById("canvas");
    var ctx=c.getContext("2d");
    paint.init();
    paint.toolsVisible();
    var socket = new WebSocket('ws://192.168.1.7:8888/test.php');
socket.onopen = function(event) { 
    console.log('连接成功');
};
 
socket.onmessage = function(event) { 
    var msg = event.data;
    // console.log(msg);return;
    msg=JSON.parse(msg)
    msg=JSON.parse(msg)
    // msg={ 
    //     "d":"s",
    //     "s":"a"
    // }

    // console.log(msg.content);return;
    // return
    if (msg.content.length > 2) { 
        // var c=document.getElementById("canvas");
        // var ctx=c.getContext("2d");
        // ctx.putImageData(content,0,0);
        // if(msg.type=="canvas"){ 
        //     console.log('res===>', msg.content);
        //     var image = new Image();
        //     image.src=msg.content;
        //     image.onload = function(){ 
        //         ctx.drawImage(image, 0, 0);
        //     }
        // }
        switch(msg.type){ 
            case "canvas":
                console.log('res===>', msg.content);
                var image = new Image();
                image.src=msg.content;
                image.onload = function(){ 
                    ctx.drawImage(image, 0, 0);
                }
                break;
            case "chat":
                auto(msg.content);
                break;

        }
    }
};

// var send = document.getElementById('send');
// send.addEventListener('click', function() { 
 
//     var content = document.getElementById('myinput').value;
//     socket.send(content);
//     console.log('已发送');
 
// });
//发送画布
// var int=self.setInterval("clock()",3000)
// function clock()
//   {    
//     // can=$("canvas");
//     // var cxt=can.getContext('2d');
//     var image = new Image();
//     image.src = c.toDataURL("image/png");
//     //var content=ctx.getImageData(0,0,740,420);
//     // console.log(content)
//     var content=image.src;
//     // content=JSON.stringify(content)
//      // console.log(content)
//     socket.send(content);
//   }

//发送画布的函数，在paint.js中调用
function sendcanvas() {  /*重置数据*/
        // console.log("d")
        var image = new Image();
        image.src = c.toDataURL("image/png");
        //var content=ctx.getImageData(0,0,740,420);
        // console.log(content)
        var content=image.src;

        content=JSON.stringify({ "type":"canvas","content":content})
         // console.log(content)
        socket.send(content); 
        
    };

  
  //发送弹幕初始化
  // $(function() { 
    var pageW = parseInt($(document).width());
    var pageH = parseInt($(document).height());
    var boxDom = $("#boxDom");
    var btnDom = $(".send");
    var Top, Right;
    var width;
    width = pageW;
    var colorArr = ["#cfaf12", "#12af01", "#981234", "#adefsa", "#db6be4", "#f5264c", "#d34a74"];
    // btnDom.bind("click", "auto("+$("#msg").val()+")");
    btnDom.click(function(){ 
        var text = $("#msg").val();
        auto(text);
        socket.send(JSON.stringify({ "type":"chat","content":text}));
    })
    document.onkeydown = function(e) { 
        if (e.keyCode == 13) { 
            var text = $("#msg").val();
            auto(text);
            socket.send(JSON.stringify({ "type":"chat","content":text}));
        }
    }
    //发送弹幕
    function auto(text) { 
        var creSpan = $("<span class='string'></span>");
        // var text = $("#msg").val();
        creSpan.text(text);
        $("#msg").val("");
        Top = "74%";
        var num = parseInt(colorArr.length * (Math.random()));
        if (Top > pageH - 90) { 
            Top = pageH - 90;
        }
        //弹幕样式
        creSpan.css({ 
            "position":"absolute",
            "top": "0",
            "right": -200,
            "color": getRandomColor(),
            "height":"100%",
            "line-height":boxDom.height()+"px",

        });
        boxDom.append(creSpan);
        var spanDom = $("#boxDom>span:last-child");
        spanDom.stop().animate({ 
            "right": pageW + 300
        }, 10000, "linear", function() { 
            $(this).remove();
        });
    }
    //随机获取弹幕颜色
    function getRandomColor() { 
        return '#' + (function(h) { 
            return new Array(7 - h.length).join("0") + h
        })((Math.random() * 0x1000000 << 0).toString(16));
    }
// });
</script>
<!-- <script type="text/javascript" src="{$smarty.const.PUBLIC_PATH}js/myself/paint.js"></script> -->
<br><br>

</body>
</html>